<template>
  <div @keypress="submit($event)">
    <el-container class="login" direction="vertical">
      <el-row>
        <el-input
          size="medium"
          class="user"
          v-model="user"
          placeholder="请输入用户名"
        ></el-input>
      </el-row>
      <el-row>
        <el-input
          size="medium"
          placeholder="请输入密码"
          v-model="pwd"
          show-password
        ></el-input>
      </el-row>
      <el-row type="flex" justify="center">
        <el-button @click="login" type="primary" round>登录</el-button>
      </el-row>
    </el-container>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      user: "",
      pwd: "",
    };
  },
  methods: {
    login() {
      if (this.user.trim() && this.pwd.trim()) {
        let data = qs.stringify({ admin: this.user, password: this.pwd });
        this.axios.post("/login", data).then((result) => {
          if (result.data == 0) {
            this.$message.error("登录失败");
          } else {
            sessionStorage.setItem("admin", result.data.admin);
            this.$store.commit("logined");
          }
        });
      }else{
          this.$message.error("用户名或密码不能为空");
      }
    },
    submit(e) {
      if (e.keyCode === 13) {
        this.login();
      }
    },
  },
};
</script>

<style>
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 20px;
  background-color: aqua;
  border-radius: 8px;
}
.login input {
  margin-bottom: 10px;
}
</style>
